<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			
			账号: <input type="text" v-model="user.account" placeholder="输入账号!"><br>
			密码: <input type="password" v-model="user.password" placeholder="输入密码!"> <br>
			性别: <input type="radio" name="sex" v-model="user.sex" value="0" > 女
				  <input type="radio" name="sex" v-model="user.sex" value="1" > 男 <br>
			爱好: <input type="checkbox" name="hb" v-model="user.hb" value="唱">唱 
				  <input type="checkbox" name="hb" v-model="user.hb" value="跳">跳
				  <input type="checkbox" name="hb" v-model="user.hb" value="rap">rap
				  <br>
			家乡: <select name="home" v-model="user.home">
					  <option value="shuizhong">绥中县</option>
					  <option value="dongdaihe">东戴河</option>
					  <option value="huludao">葫芦岛</option>
				  </select>	  
				  
				  <button type="button" @click="register()">注册</button>
				  <button type="button" @click="reset()">重置</button>
			
		</div>
	</body>
	
	<script>
		
		var vue = new Vue({
			el:"#app",
			data:{
				user:{hb:[]}
			},
			methods:{
				register:function(){
					alert(JSON.stringify(this.user));
				},
				reset:function(){
					this.user = {};
				}
			}
		});
		
	</script>
</html>
